<template>
    <div>
        <div>
            <van-swipe class="my-swipe" :autoplay="100 % 0" indicator-color="white">
                <van-swipe-item v-for="item in list"><img class="tu1" :src="item.src" alt=""></van-swipe-item>
            </van-swipe>
            <div class="title">
                <div class="price">
                    <div class="left">
                        <span>$</span><span>{{ goods.sell_price }}</span>
                    </div>


                    <span class="collect">收藏</span>
                </div>
                <div class="intitle">
                    <span>自营</span>
                    <span>{{ goods.title }}</span>
                </div>




            </div>

            <div class="content" v-html="goods.content">

            </div>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-goods-action-icon icon="cart-o" @click="$router.push('/shopcat')"
                    :badge="$store.getters.getshoplistNum" text="购物车" />
                <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
                <van-goods-action-button @click="addshopcat" type="warning" text="加入购物车" />
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
        </div>
        <van-sku v-model="show" :sku="sku" :goods="goods2" @add-cart="addcart" />


    </div>
</template>

<script>
import { getgoodetail, getthumbimages } from "../api/goodsdetail"
export default {
    data() {
        return {
            show: false,
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                    {
                        k: '颜色', // skuKeyName：规格类目名称
                        k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                        v: [
                            {
                                id: '1', // skuValueId：规格值 id
                                name: '午夜色', // skuValueName：规格值名称
                                imgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/162241/15/36890/41932/64891993F8b9e8f2f/3acd4588f7275b0c.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                                previewImgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/162241/15/36890/41932/64891993F8b9e8f2f/3acd4588f7275b0c.jpg', // 用于预览显示的规格类目图片
                            },
                            {
                                id: '2',
                                name: '星光色',
                                imgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/81071/24/24525/43960/648919afFb6e69d22/28e2e0d868379e22.jpg',
                                previewImgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/81071/24/24525/43960/648919afFb6e69d22/28e2e0d868379e22.jpg',
                            },
                            {
                                id: '3',
                                name: '紫色',
                                imgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/202952/13/38372/44478/648919c9F793c696a/aabfd12f4da72c9d.jpg',
                                previewImgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/202952/13/38372/44478/648919c9F793c696a/aabfd12f4da72c9d.jpg',
                            },
                            {
                                id: '4',
                                name: '蓝色',
                                imgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/111839/35/37480/45646/64891975F2d78a3e0/b4f6a107e1330ccb.jpg',
                                previewImgUrl: 'https://img14.360buyimg.com/n4/jfs/t1/111839/35/37480/45646/64891975F2d78a3e0/b4f6a107e1330ccb.jpg',
                            }
                        ],
                        largeImageMode: true, //  是否展示大图模式
                    },
                    {
                        k: '版本',
                        k_s: 's2',
                        v: [{ id: "11", name: "128G" }, { id: "12", name: "256G" }, { id: "13", name: "512G" }]
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                        id: 2259, // skuId
                        s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '11', // 规格类目 k_s 为 s2 的对应规格值 id
                        price: 100, // 价格（单位分）
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },
                    {
                        id: 2260, // skuId
                        s1: '3', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '13', // 规格类目 k_s 为 s2 的对应规格值 id
                        price: 99999, // 价格（单位分）
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },
                    {
                        id: 2260, // skuId
                        s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '11', // 规格类目 k_s 为 s2 的对应规格值 id
                        price: 99999, // 价格（单位分）
                        stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '2199.00', // 默认价格（单位元）
                stock_num: 999, // 商品总库存
                collection_id: 85, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: true, // 是否无规格商品
                hide_stock: false // 是否隐藏剩余库存
            },
            goods2: {
                // 默认商品 sku 缩略图
                picture: 'https://img14.360buyimg.com/n4/jfs/t1/162241/15/36890/41932/64891993F8b9e8f2f/3acd4588f7275b0c.jpg'
            },
            list: [
            ],
            goods: {
            },

        }
    },
    methods: {
        addshopcat() {
            this.show = true
        },
        addcart(val) {
            var obj = {
                id: val.selectedSkuComb.id,
                num: val.selectedNum
            }
            console.log(123231, obj);
            this.$store.commit("addcart", obj)
            this.show = false
        }
    },
    async created() {
        //  发生请求看看能获得什么数据
        //  如何实现同时发生请求  
        // let result = await getgoodetail()
        // await getthumbimages()

        console.log(this.$route.query.id);
        let id = this.$route.query.id

        let [result1, result2] = await Promise.all([getgoodetail(id), getthumbimages(id)])
        console.log(result2);
        this.goods = result1.message
        this.list = result2.message
        this.sku.price = result1.message.sell_price
        this.sku.collection_id = result1.message.id
        this.sku.stock_num = result1.message.stock_quantity
        this.goods2.picture = this.list[0].src


        console.log(this.goods.content);
        //  将749进行改变

        //  \d 匹配数字  * 0到多个数字
        var reg = /width="\d*"/g
        this.goods.content = this.goods.content.replace(reg, `width="100%"`)





    }
}
</script>

<style lang="scss" scoped>
.tu1 {
    width: 15rem;
    height: 9rem;
}


.van-sku-container {
    min-height: 22%;
}

.title {
    width: 14.5rem;
    margin: 0 auto;
    padding: 0.5rem;
    background-color: #fff;
    border-bottom-left-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
}


.price {
    display: flex;
    justify-content: space-between;

    .left {
        color: #f2270c;


        span:nth-child(1) {
            font-size: 0.7rem;
        }

        span:nth-child(2) {
            // font-size: 0.7rem;
            font-weight: 550;
        }
    }

    .collect {
        font-size: 0.5rem;
    }


}

.intitle {
    overflow: hidden;
    text-overflow: ellipsis;

    /*弹性伸缩盒子模型显示*/
    display: -webkit-box;

    /*限制在一个块元素显示的文本的行数*/
    -webkit-line-clamp: 2;

    /*设置或检索伸缩盒对象的子元素的排列方式*/
    -webkit-box-orient: vertical;

    span:nth-child(1) {
        font-size: 0.4rem;
        color: #ffff;

        padding: 0.1rem;
        background-color: #f7361b;
        background: linear-gradient(to right bottom, #ff0f00, #ff9f7e)
    }

    span:nth-child(2) {
        font-size: 0.8rem;
        font-weight: 700;
    }
}

.content {
    background-color: #fff;
    width: 14.5rem;
    margin: 0 auto;
    margin-top: 0.5rem;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
    overflow: hidden;

    //  深度选择器  有时候用了别人的组件 或者是 v-html 选择的样式会不生效, 一般情况下   ::v-deep 用深度选择器
    ::v-deep table {
        // background-color: red;

        // width: 100% !important;

        // font-size: 0px;

        img {
            display: block;

        }
    }
}
</style>